<template>
  <div class="bottom">
    <div class="item" @click="clickItem('/home')" :class="{active: $route.path==='/home'}">
      <i class="icon-profile"></i>
      <p>联系人</p>
    </div>
    <div class="item" @click="clickItem('/ad')" :class="{active: $route.path==='/ad'}">
      <i class="icon-bubbles2"></i>
      <p>公告</p>
    </div>
    <div class="item" @click="clickItem('/exact')" :class="{active: $route.path==='/exact'}">
      <i class="icon-list-numbered"></i>
      <p>面试</p>
    </div>
    <div class="item" @click="clickItem('/')" :class="{active: $route.path==='/'}">
      <i class="icon-feed"></i>
      <p>周边</p>
    </div>
  </div>
</template>

<script>
    export default {
      name: "bottom",
      methods:{
        clickItem:function(path){
            this.$router.push(path);
        }
      }

    }
</script>

<style scoped>

  .bottom{
    position: fixed;
    bottom:0px;
    border-top:1px solid #d2d2d2;
    background-color: #f2f2f2;
    width: 100%;
    display:flex;
    height:60px;
    align-items: center;
    justify-content: center;
  }
  .item{
    flex:1;
  }
  .item p{
    margin:0;
    font-size: 15px;
  }
  .active{
    color:#108b70;
  }
</style>
